<template>
  <a-modal
    :title="'导入薪资'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @ok="handleOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">

        <a-form-model-item ref="date" label="月份" prop="date">
          <a-month-picker class="full" v-model="form.date" placeholder="请选择月份" />
        </a-form-model-item>
       
        <a-form-model-item ref="file" label="薪资表" prop="file">
            <a-upload
              :disabled="disabled"
              :file-list="file"
             :customRequest="beforeUpload"
            >
              <a-button> <a-icon type="upload" /> 选择 </a-button>
            </a-upload>
          </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      form: {
        date: undefined,
        file: undefined,
      },
      file:[],
      disabled: false,
      rules: {
        date: [
          { required: true, message: '请选择月份', trigger: 'change' },
        ],
        file: [
          { required: true, message: '请上传薪资表', trigger: 'change' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
    })
  },
  methods: {
   beforeUpload(e){
     this.form.file = e.file;
      this.file = [
        {
          uid:'upload',
          name: e.file.name,
          status: 'done'
        }
      ];
   },
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.form.date = this.form.date.format("YYYY-MM")
          this.$emit('ok', this.form)
        } else {
          return false;
        }
      });
    },
    resetFields() {
      this.$refs.ruleForm.resetFields();
      this.form = {
        date: undefined,
        file: undefined,
      };
    },
  }
}
</script>
